<template>
  <!-- 授权用户 -->
  <cfDialog :dialogObj='dialogObj'>
    <div slot='content' v-loading="loading">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable v-search="handleSearch" style="width: 140px"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable v-search="handleSearch"  style="width: 140px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
          <el-button size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <cfCard title='' hasTable :tableObj='tableDataObj' style="padding: 0;">
        <!--表格区域-->
        <template slot='content'>
          <cfTable ref='cfTable' :tableDataObj='tableDataObj' :tableData='tableData' @handleSelectionChange='handleSelectionChange'>
            <template slot='status'>
              <el-table-column label='状 态' width='100px' align="center">
                <dict-tag slot-scope='{row}' :options="sysNormalDisable" :value="row.status"/>
              </el-table-column>
            </template>
          </cfTable>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getListFn"
          />
        </template>
      </cfCard>
    </div>
    <template slot='footer'>
      <el-button type='primary' size='small' v-if="!loading" @click='handleConfirm'>确定</el-button>
    </template>
  </cfDialog>
</template>

<script>
import { unallocatedUserList, authUserSelectAll } from "@/api/system/role";
export default {
  props: {
    // 角色编号
    roleId: {
      type: [Number, String]
    },
    dialogObj: {
      type: Object,
      default: ({
        visible: false,
        id: '',
        title: '',
        type: ''
      })
    }
  },
  data() {
    return {
      // 遮罩层
      visible: false,
      // 选中数组值
      userIds: [],
      // 总条数
      total: 0,
      // 未授权用户数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleId: undefined,
        userName: undefined,
        phonenumber: undefined
      },
      tableDataObj: {
        id: 'id',
        showSelection: true,
        defaultExpandAll: true,
        treeProps: {children: 'children', hasChildren: 'hasChildren'},
        option: [
          {id: 1, label: '用户名称', prop: 'userName', show: 1, needSlot: false},
          {id: 2, label: '用户昵称', prop: 'nickName', show: 1, needSlot: false},
          {id: 3, label: '手机', prop: 'phonenumber', show: 1, needSlot: false},
          {id: 4, label: '状态', prop: 'status', show: 1, needSlot: true}
        ]
      },
      loading: false
    };
  },
  created() {
    this.queryParams.roleId = this.dialogObj.id;
    this.getSysNormalDisable();
    this.getListFn();
  },
  methods: {
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userIds = selection.map(item => item.userId);
    },
    // 查询表数据
    async getListFn() {
      this.loading = true;
      let res = await unallocatedUserList(this.queryParams);
      if(res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    /** 搜索按钮操作 */
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getListFn();
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 选择授权用户操作 */
    async handleConfirm() {
      const roleId = this.queryParams.roleId;
      const userIds = this.userIds.join(",");
      if (userIds == "") {
        this.$modal.msgError("请选择要分配的用户");
        return;
      }
      this.loading = true;
      let res = await authUserSelectAll({ roleId: roleId, userIds: userIds })
      if (res.code === 200) {
        this.$modal.msgSuccess(res.msg);
        this.dialogObj.visible = false;
        this.$emit("refresh");
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>
<style>
</style>